<template>
  <!-- <div class="content-box">
  <common-header :title="title" :showleft="true"></common-header>-->
  <div class="page-content">
    <div class="details" v-html="detailsContent"></div>
    <commonFooter></commonFooter>
  </div>
  <!-- </div> -->
</template>

<script>
import { commonHeader, commonFooter } from "common/index";
import { newsOneApi } from "@/api";
export default {
  data() {
    return {
      token: 0,
      details: ""
    };
  },
  mounted() {
    // let id = this.$route.params.token || this.$route.query.token
    newsOneApi({ id: this.$route.params.id }).then(res => {
      if (res.code == 200) {
        this.details = res.data.content;
      }
    });
  },
  created() {},
  methods: {},
  components: {
    commonHeader,
    commonFooter
  },
  computed: {
    detailsContent() {
      return this.details
        .replace(/&amp;nbsp;/g, " ")
        .replace(this.details ? /&(?!#?\w+;)/g : /&/g, "&amp;")
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.page-content {
  .mb(98);
}
.details {
  padding: 0.4rem 0.2rem;
  font-size: 0.38rem;
  line-height: 2;
  background: #fff;
  /deep/ img {
    max-width: 100% !important;
    height: auto !important;
  }
}

.details table {
  width: 100% !important;
  padding: 0.2rem;
  table-layout: fixed;
  overflow: hidden;
}

.details td {
  /* max-width: 50% !important; */
  border-style: solid;
  word-break: break-all !important;
  word-wrap: break-word !important;
}
.details td.et2 {
  width: 20% !important;
}
.details td.et3 {
  width: 80% !important;
}
.details img {
  max-width: 100% !important;
  height: auto !important;
}
</style>
